<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, user-scalable=no"
        />
        <title>skinview3d render - SkinRenderMC</title>
        <style>
            @font-face {
                font-family: 'Minecraft';
                /* src: url('https://cdn.jsdelivr.net/npm/skinview3d@3.0.0-alpha.1/assets/minecraft.woff2')
                    format('woff2'); */
                src: url("./node_modules/skinview3d/assets/minecraft.woff2") format("woff2");
            }

            body {
                font-family: 'Helvetica', 'Arial', 'sans-serif';
                margin: 5px;
            }

            .front {
                filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.3));
            }

            .back {
                filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.3));
            }
        </style>
        <script src="./node_modules/skinview3d/bundles/skinview3d.bundle.js"></script>
        <!-- <script src="https://cdn.jsdelivr.net/npm/skinview3d@3.0.0-alpha.1/bundles/skinview3d.bundle.min.js"></script> -->
    </head>

    <body>
        <canvas id="skin_container" class="front"></canvas>

        <script>
            let currentUrl = new URL(window.location);
            let skin_container = document.getElementById('skin_container');
            let nameTag = currentUrl.searchParams.get('nameTag');

            let skinViewer = new skinview3d.SkinViewer({
                canvas: skin_container,
                width: 350,
                height: 670,
                skin: currentUrl.searchParams.get('skinUrl'),
                cape: currentUrl.searchParams.get('capeUrl'),
            });

            function fakeAnimation(t = 0) {
                // Leg swing
                skinViewer.playerObject.skin.leftLeg.rotation.x =
                    Math.sin(t) * 0.5;
                skinViewer.playerObject.skin.rightLeg.rotation.x =
                    Math.sin(t + Math.PI) * 0.5;
                // Arm swing
                skinViewer.playerObject.skin.leftArm.rotation.x =
                    Math.sin(t + Math.PI) * 0.5;
                skinViewer.playerObject.skin.rightArm.rotation.x =
                    Math.sin(t) * 0.5;
                const basicArmRotationZ = Math.PI * 0.02;
                skinViewer.playerObject.skin.leftArm.rotation.z =
                    Math.cos(t) * 0.03 + basicArmRotationZ;
                skinViewer.playerObject.skin.rightArm.rotation.z =
                    Math.cos(t + Math.PI) * 0.03 - basicArmRotationZ;

                // Always add an angle for cape around the x axis
                const basicCapeRotationX = Math.PI * 0.06;
                skinViewer.playerObject.cape.rotation.x =
                    Math.sin(t / 1.5) * 0.06 + basicCapeRotationX;
            }

            skinViewer.controls.enablePan = true;

            // Name Tag
            if (nameTag != null) {
                skinViewer.nameTag = nameTag;
                skinViewer.nameTag.position.x = 0;
                skinViewer.nameTag.position.y = 19;
                skinViewer.nameTag.position.z = 0;
                skinViewer.nameTag.height = 2;
            }

            skinViewer.fov = 70;
            skinViewer.zoom = 1.0;
            function showFront() {
                skinViewer.camera.position.x = 13.8;
                skinViewer.camera.position.y = 14.9;
                skinViewer.camera.position.z = 28.9;

                // Head
                skinViewer.playerObject.skin.head.rotation.x = -0.2;

                fakeAnimation(10);
            }

            function showBack(hideNameTag = false) {
                skin_container.setAttribute('class', 'back');
                if (nameTag != null) {
                    skinViewer.nameTag.visible = !hideNameTag;
                }
                skinViewer.camera.position.x = -14.6;
                skinViewer.camera.position.y = 13.9;
                skinViewer.camera.position.z = -29.1;

                skinViewer.playerObject.skin.head.rotation.x = 0;

                fakeAnimation(12);
            }

            showFront();
        </script>
    </body>
    <!-- This project is developed by jinzhijie (https://github.com/jinzhijie) under MIT license.-->
    <!-- This project is based on https://github.com/bs-community/skinview3d . -->
    <!-- Thanks yushijinhun (https://github.com/yushijinhun) for guiding me.-->
</html>
